import React from 'react';
import { useDrop } from 'react-dnd';
import { Box, Typography } from '@mui/material';

const ItemTypes = {
  IMAGE: 'image',
};

const DragAndDropArea = ({ onDrop }) => {
  const [{ isOver }, drop] = useDrop({
    accept: ItemTypes.IMAGE,
    drop: (item) => onDrop(item),
    collect: (monitor) => ({
      isOver: !!monitor.isOver(),
    }),
  });

  return (
    <Box
      ref={drop}
      sx={{
        border: '1px dashed #bbb',
        borderRadius: '4px',
        backgroundColor: isOver ? '#e3f2fd' : '#fafafa',
        position: 'absolute',
        top: 5,
        left: 5,
        right: 5,
        bottom: 5,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        transition: 'background-color 0.3s',
        fontSize: '0.75rem',
        textAlign: 'center',
      }}
    >
      <Typography variant="caption">
        {isOver ? '释放以分类' : '拖放图片到此'}
      </Typography>
    </Box>
  );
};

export default DragAndDropArea;